So far I implemented this as below.

This is a div inside a ReactJs component:

                <div className='ChatAreaClass' as={InputMessage} style={{
                    display: "flex",
                    flexDirection: "row",
                    borderTop: "1px dashed #d1dbe4",
                    alignItems: 'end',
                    marginBottom: "5px"
                }}>
                    <Button className='chat-btn'
                        style={{backgroundImage: `url(${stickersIcon})`}}
                    />
                    <Button className='chat-btn'
                        style={{backgroundImage: `url(${gifIcon})`}}
                    />
                    <Button className='chat-btn'
                        style={{backgroundImage: `url(${emojiIcon})`}}
                    />

                    <textarea onChange={e => setTextAreaAutosize(e)}
                        className='form-control text-area' 
                        value={chatMessage} placeholder='write here ...'>
                    </textarea>

                    <Button className='chat-btn'
                        style={{backgroundImage: `url(${arrowIcon})`}}
                    />
                </div>

css:

.ChatAreaClass {
    text-align: left;
    border-top: unset !important;
    margin-top: 0px;
}

.text-area {
    margin-left: 5px;
    margin-right: 6px;
    margin-bottom: 4px;
    border-radius: 10px;
    overflow: clip;
    margin-top: 5px;
    resize: none;
    border-color: #2200ff;
    max-height:200px;
    scrollbar-width: none;
}

Output:

Now, facing problem for the chat input text-area.

For a large input text messages, It hides the incoming messages.

Expected Output is:

How can I achieve this? should I make 3 different div or, it is possible in some other way?